<template>
    
    <el-button type="primary" class="w115 "  @click="editOpen()" >添加身份</el-button>

    <div class="bgf mart20" v-loading="loading" >
         
        <el-table  :data="list" >

            <el-table-column prop="description" min-width="100" label="身份名称"  ></el-table-column>

            <el-table-column prop="roleId" min-width="80" label="身份ID"  ></el-table-column>

            <el-table-column prop="createTime" min-width="160" label="创建时间" show-overflow-tooltip ></el-table-column>
         
            <el-table-column fixed="right" label="操作" width="200" >
                <template #default="scope">
                    <el-button  @click="bindOpen(scope.row.roleId)" text type="primary">绑定权限</el-button>
                    <el-divider direction="vertical" />
                    <el-button  @click="editOpen(scope.row)" text type="primary">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-button  @click="delRoles(scope.row.roleId)" text type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="h70 pad20 flexab ">
            <p class="font10 cola4">共 {{total}} 条</p>
            <el-pagination
                v-model:currentPage="param.pageNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next"
                :total="total">
            </el-pagination>
        </div>
    </div>

    <el-dialog v-model="editShow" :title=" editData.roleId ? '编辑身份': '添加身份'" width="425px"  >
        <el-form :model="editData" class="demo-form-inline" label-width="70px"  >
            <el-form-item label="角色">
                <el-input v-model="editData.roleName" placeholder="输入身份的名称">
                    <template #prepend>ROLE_</template>
                </el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="editData.description" placeholder="输入身份的名称"> </el-input>
            </el-form-item>
        </el-form>
             
        <template #footer>
            <div class="tc">
                <el-button  @click="editShow = false" >取消</el-button>
                <el-button type="primary" @click="editSub" >确定</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="bindShow" title="绑定权限" width="536px"  >
        <el-scrollbar max-height="460px">
            <el-tree
                ref="trees"
                :props="props"
                :data="menuTree"
                show-checkbox
                node-key="menuId"
                :default-checked-keys="checklist"
                @check="handleCheckChange"
            />
        </el-scrollbar>
             
        <template #footer>
            <div class="tc">
                <el-button  @click="bindShow = false" >取消</el-button>
                <el-button type="primary" @click="bindSub" >确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
export default {
    data(){
        return{
            editShow:false,
            editData:[],
            checklist:[],
            bingroleId: '',

            props :{
                label: 'title',
                // id: 'menuId',
            },
            bindShow:false,
            menuTree: [],  
            loading: false,
            param:{
                pageNumber:1,
                pageSize: 10,
            },
            list:[],
            total:0,
            statusL: {1: '出售中',2:'仓库中',3:'待审核',4:'审核未通过',5:'强制下架'} ,
            data:[]
        }
    },
    created(){
        this.getList()
        this.getCate();

    },
    methods:{

        async editSub(){
            let that = this;
            console.log(that.editData,'editData');

            let obj = JSON.parse(JSON.stringify(that.editData));

            that.dialogLoading = true;

            if(!obj.roleName){
                that.$message.warning('请输入角色名称');
                return
            }

            let res ;
            console.log(obj);

            if(obj.roleId){
                obj.roleName = 'ROLE_'+ obj.roleName

                res = await that.$api.editRole(obj);
            }else{
                res = await that.$api.createRole(obj);
            }
            that.dialogLoading = false;

            if(res){
                that.$message.success(res.message);
                that.getList();
                that.editShow = false;
            }
        },

        editOpen(val){
            let that = this;

            if(val){
                console.log(val,'val--------');
                let arr = val.tltle.split('_');
                arr.splice(0,1);
                console.log(arr.join('_'),'========')
                that.editData = {
                    roleId: val.roleId,
                    roleName: arr.join('_'),
                    description: val.description,
                }
            }else{
                that.editData={};
            }
            
            that.editShow = true;
        },

        handleCheckChange(val1,val2){
            console.log(val1,val2,'valoooooooooo')
            this.checklist = val2.checkedKeys;
        },

        bindSub(){
            let that = this;

            let str = that.checklist.join(',')
            console.log(str,that.bingroleId,'0000000000')
            // return
            that.$api.distributionPermissionForRole({roleId:that.bingroleId,permissionList:str}).then(res=>{
                console.log(res);
                if(res){
                    that.$message.success(res.message);
                    that.getList(1);
                    that.bindShow = false;
                }
                that.loading = false;
            })
        },

        bindOpen(id){
            this.bindShow = true;
            let that = this;
            that.bingroleId = id;
            that.$api.getBindingPermission({id:id}).then(res=>{
                console.log(res,'getBindingPermission');
                if(res){
                    that.checklist = res;
                    that.$refs.trees.setCheckedNodes(res)
                }
            })
        },
        
        // 删除
        delRoles(id){
            let that = this;
            console.log(id);

            this.$msgbox.confirm(
                "删除后的身份信息将不会出现在身份管理的列表中",
                "确定要删除该身份的信息么？",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                }
            ).then(() => {
                that.$api.removeRole({id:id}).then(res=>{
                    console.log(res);
                    if(res){
                        that.getList(1);
                        that.$message.success('删除成功');
                    }
                })
                
            }).catch(() => {});
        },

        // 重置
        rewrite(){
            let that = this;
            let obj = {
                reviewStatus: that.param.reviewStatus,
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
            }
            that.param = obj;
        },
      
        getList(pageNumber){
            let that = this;
            if(pageNumber){
                that.param.pageNumber = pageNumber;
            }
            that.loading = true;
            console.log(this.param,'this.param=====')
            that.$api.roleList(this.param).then(res=>{
                console.log(res);
                if(res){
                    this.list = res.records
                    this.total = res.total;
                }
                that.loading = false;
            })
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
        
        getCate(){
            let that = this;
            that.$api.getMenuTree().then(res=>{
                console.log(res,'getMenuTree------');
                if(res){
                    that.menuTree = res;
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.manage1{
    padding: 25px 20px;
    .from{
        background: #F2F3F5;
        padding: 24px 16px 4px;
        margin-bottom: 20px;
    }
}
.manage2{
    padding: 14px ;
    display: flex;
    align-items: center;
    font-size: 14px;
}
</style>